import { View } from "@tarojs/components";
import { AbstractNavigator, ImageTextCard } from "@/components";
import style from "./index.module.scss";
import { ActionNames, ActionKeys, sendAction } from "@/utils/tracking";
import { ApiShopItemsMapping } from "@/data/shop/shopTypes";

type ShopItem = {
  id: number;
  name: string;
  typeLabelColor: string;
  price: number;
  cover: string;
  type: ApiShopItemsMapping;
  typeName: string;
};

type ShopItemListProps = {
  shopItemList: ShopItem[];
  cardType: "product-card" | "product-card-short";
};

export const C42ShopItemList = ({
  shopItemList,
  cardType,
}: ShopItemListProps) => {
  const onItemClick = (shopItem: ShopItem) => {
    if (cardType === "product-card") {
      sendAction(ActionNames.PublicationListClick, {
        [ActionKeys.PublicationName]: shopItem.name,
        [ActionKeys.PublicationPrice]: shopItem.price + "",
      });
    }

    if (shopItem.type === ApiShopItemsMapping.Giftcertificate) {
      sendAction(ActionNames.GiftCardListSkuClick, {
        [ActionKeys.GiftCardName]: shopItem.name,
        [ActionKeys.GiftCardAmount]: shopItem.price + "",
        [ActionKeys.GiftCardType]: shopItem.typeName,
      });
    } else if (shopItem.type === ApiShopItemsMapping.Souvenir) {
      sendAction(ActionNames.SouvenirListSkuClick, {
        [ActionKeys.SouvenirName]: shopItem.name,
        [ActionKeys.SouvenirAmount]: shopItem.price + "",
        [ActionKeys.SouvenirType]: shopItem.typeName,
      });
    }
  };

  return (
    <View className={style["shop-item-list-wrapper"]}>
      <View className={style["shop-item-content-wrapper"]}>
        {shopItemList.map((shopItem) => (
          <AbstractNavigator
            key={shopItem.id}
            url={`pages/shopitem-detail/index?id=${shopItem.id}`}
            onClick={() => onItemClick(shopItem)}
          >
            <ImageTextCard
              imagePath={shopItem.cover}
              type={cardType}
              title={shopItem.name}
              cost={shopItem.price}
              themeColor={shopItem.typeLabelColor}
            />
          </AbstractNavigator>
        ))}
      </View>
    </View>
  );
};
